<template>
  <div id="app">
    <div id="nav">
      <!-- 使用tag属性改变 router-link 渲染成某种标签，默认是a-->
      <!-- <router-link to="/" tag="li">Home</router-link> -->
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <!-- 路由跳转方式一:router-link 的to属性 -->
      <router-link to="/user">User</router-link>
    </div>
    <hr>
    <button @click="hdClick">编程式导航</button>
    <hr>
    <button @click="hdClick1">点击跳转到about并携带query参数</button>&nbsp;
    <button @click="hdClick2">点击跳转到user并携带params参数</button>
    <hr>
    <!-- 路由跳转带参数方式三： 在router-link中动态传入to属性 -->
    <!-- <router-link :to="'/about'">About1</router-link> -->
    <!-- <router-link :to="{path:'/about'}">About2</router-link> -->
    <router-link :to="{path:'/about',query:{page:1}}">About3</router-link>&nbsp;
    <router-link :to="{name:'About',query:{page:1}}">About4</router-link>
    <!-- 小结 :to里面的数据直接当成this.$router.push() 要传入的数据,params也一样，这里就不写了 -->

    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods:{
    // 路由跳转方式二: 编程式导航(通过代码跳转)
    hdClick(){
      //this.$router.push('/user') // 1.通过路劲
      //this.$router.push({path:'/user'})
      this.$router.push({name:'User'})  //2.通过name  注意不要带/,直接name对应的值即可
    },

    // 路由跳转带参数
    // 方式一: query   xxx/about?page=1&xxx
    hdClick1(){
      // this.$router.push({path:'/about',query:{page: 1}})
      this.$router.push({name:'About',query:{page: 1}})   
      //小结 ：name和path用法上基本一样，就是加入query对象
    },
    // 方式二: params   xxx/user/用户id值
    // 前提：在路由表中进行 动态路劲配置
    hdClick2(){
      let userId = '123'
      // this.$router.push({path:`/user/${userId}`})   
      this.$router.push({name:'About',params:{ userId }})
      //小结 ：path方式直接拼接完整路劲即可，而name方式需要加上params对象
    }
  }
}
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
